<!-- 我是酒店 -->
<template lang="html">
  <div class="hotelBox">
      <el-row class="formBox box1">
        <el-col :span="2" class="text-right headLable">
          <span>所在省份：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-select size="small" v-model="city" clearable placeholder="请选择" class="text">
            <el-option v-for="item in options" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-col>
        <el-col :span="2" class="text-right">
          <span>酒店名：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input v-model="hotelName" size="small" class="text" placeholder="请输入内容"></el-input>
        </el-col>
    </el-row>
    <el-row class="formBox box2">
      <el-col :span="2" class="text-left" style="margin-left:80px;">
         <el-button type="success" size="small" @click="find">筛选</el-button>
      </el-col>
      <el-col :span="2" :offset="16" class="text-left">
         <el-button type="success" size="small" @click="changeTanContent(5)"  >＃新增酒店</el-button>
      </el-col>
    </el-row>

    <el-row class="box3" v-loading.body="$store.state.TanMerchants.loading">
      <ul class="listBox4">
          <li class="first">
            <span class="choose gray">选择</span>
            <span class="name gray">酒店名</span>
            <span class="about gray">关联商家</span>
            <span class="city gray">所在城市</span>
            <span class="numb gray">房型数量</span>
            <span class="hotelType gray">房型</span>
            <span class="type green">操作</span>
          </li>
          <el-checkbox-group v-model="checkList">
            <li v-for="item in $store.state.TanMerchants.hotelList">
              <span class="choose text-left">
                <el-checkbox :label="item.id" class="check" ></el-checkbox>
              </span>
              <span class="name text-left">{{item.name}}</span>
              <span class="about text-left">{{item.businessmenName}}</span>
              <span class="city text-left ">{{item.cityName}}</span>
              <span class="numb text-left">{{item.roomNum?item.roomNum:'0'}}</span>
              <span class="hotelType">{{item.roomNames}}</span>
              <span class="type green" @click="changeTanContent(6,item.id)">编辑</span>
            </li>
          </el-checkbox-group>
      </ul>
      <el-row style="padding-top:10px;">
        <el-col :span="2" class="text-left">
          <el-button type="danger" size="small" @click="delet">删除</el-button>
        </el-col>
        <el-col :span="10" :offset="12" class="text-right">
          共{{this.$store.state.TanMerchants.total}}条
          <span style="display:inline-block; min-width:100px;">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :page-count="$store.state.TanMerchants.pages">
            </el-pagination>
          </span>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
var url;

export default {
  data(){
    return{
      list:[],
      checkList:[],
      city:'',
      hotelName:'',
      page:1,
      loading:false,
      options: [{
        name: '四川省',
        code: 510000
      }, {
        name: '浙江省',
        code: 330000
      }, {
        name: '上海市',
        code: 310000
      },{
        name: '重庆市',
        code: 500000
      }]
    }
  },
  methods:{
    find:function (){
      this.getList();
    },
    delet:function (){
      this.$store.dispatch('showLoading','TanMerchants');
      var str='';
      for(let i in this.checkList){
        str=str+this.checkList[i]+',';
      }
      str=str.substring(0,str.length-1);
      axios.get(url+'/v1/businessmen/delete/hotel',{
        params:{
          id:str
        }
      }).then((res)=>{
        this.getList();
      }).catch((err)=>{
        this.loading=false;
      })
    },
    handleCurrentChange:function (){
      this.getList();
    },
    changeTanContent:function (type,id){
      if(type==5){
        var title='新增酒店';
      }else if(type==6){
        var title='编辑酒店';
      }
      console.log(id);
      var json1={
        'type':type,
        'name':'TanMerchants',
        'id':id,
        'title':title
      }
      this.$store.dispatch('changeDialog',json1);
    },
    getList:function (){
      this.$store.dispatch('showLoading','TanMerchants');
      var json={
        provinceCode:this.city,
        name:this.hotelName,
        pageCount:10,
        pageIndex:this.page
      }
      this.$store.dispatch('getMerchantsHotel',json);

    }
  },
  created(){
    url=this.$store.state.url;
    this.getList()
  }
}
</script>

<style>
.hotelBox .el-checkbox__label{display: none;}
</style>

<style lang="Sass" scoped>
.hotelBox{
  .formBox{ background: #fff; padding: 10px; text-align: left;

    .text{ height: 30px;
      .el-input__inner{height: 30px; width: 100%;}
    }
    .date{width: 150px; height: 30px;
      .el-input__inner{height: 30px; width: 100%;}
    }
    .select{width: 120px;
      .el-input__inner{width: 100%;}
    }
  }
  span{font-size: 12px; line-height: 30px;}
  .box1{border-radius: 10px 10px 0 0; padding: 20px 10px 0 10px; margin: 20px 10px 0 10px;}
  .box2{border-radius: 0 0 10px 10px; padding: 10px 10px 10px 10px; margin: 0px 10px ;}
  .box3{margin: 20px 10px 10px 10px; background: #fff; padding: 10px; box-sizing: border-box; border-radius: 10px;
    .cell{text-align: left;}
  }
  .btn{height: 32px; padding: 0 10px;
    span{line-height: 0px;  }
  }
  .tanBox{
    .el-dialog--small{min-width: 650px;}
    .el-dialog__header{text-align: left;}
  }
  .el-tag{line-height: 24px; margin-left: 10px;}
}
.listBox4{width: 100%; background: #fff;

  .first{display: flex; height: 30px; line-height: 30px; text-align: left; padding: 0 5px; background: #fff !important;

      span{display: inline-block; font-size: 12px;}
      .choose{flex: 0 0 60px; height: auto;}
      .name{flex: 0 0 150px;}
      .about{flex: 0 0 150px;}
      .city{flex: 0 0 100px;}
      .numb{flex: 0 0 80px;}
      .hotelType{flex: 1;}
      .type{flex: 0 0 50px;}

  }
  li{display: flex; height: auto; line-height: 30px;  text-align: left; padding: 10px 5px; box-sizing: border-box;

    span{display: inline-block; box-sizing: border-box; line-height: 14px;}
    .choose{flex: 0 0 60px; height: auto;}
    .name{flex: 0 0 150px;}
    .about{flex: 0 0 150px;}
    .city{flex: 0 0 100px;}
    .numb{flex: 0 0 80px;}
    .hotelType{flex: 1;}
    .type{flex: 0 0 50px; cursor: pointer;}
  }
  li:nth-of-type(odd){background: #FAFAFC;}

}
</style>
